<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .center {
        background: white;
        width: 100%;
        height: 100vh;
        border-radius: 12px;
        margin-top: 20px;
    }

    .centerTop {
        width: 98%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        margin-left: 10px;
    }

    .centerTopRight {

    }

    .centerTopRight p {
        display: inline;
        line-height: 50px;
        font-family: 仿宋;
        font-size: 12px;
    }

    .centerCenter {
        width: 98%;
        height: calc(100vh - 80px);
        margin-left: 10px;
        margin-top: 30px;
        display: flex;
    }

    .centerContent {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .addBook {
        margin-left: 30px;
        width: 80%;
        height: 100%;
    }
</style>
<body>
<div id="createBook">
    <div class="center">
        <div class="centerTop">
            <p @click="goBack()" style="cursor: pointer"><img src="../../images/icons/btn_back@2x.png" alt=""
                                                              style="width: 10px;height: 10px;"/>创建作品</p>
            <div class="centerTopRight">
                <p>审核规则</p>
            </div>
        </div>
        <div class="centerCenter">
            <div style="width: 110px;height: 220px;">
                <el-image style="width: 110px; height: 150px; cursor: pointer;"
                          v-if="form.image"
                          :src="getImage(form.image)"
                ></el-image>
                <img v-else src="../../images/login/phyd.jpg" alt="替代图片" style="width: 110px; height: 150px;">
                <div class="centerContent">
                    <el-row>
                        <el-upload
                                class="avatar-uploader"
                                action="/common/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                ref="upload"
                        >
                            <el-button round>
                                选择封面
                            </el-button>
                        </el-upload>
                    </el-row>
                </div>
            </div>
            <div class="addBook">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="书本名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="目标读者">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男频" value="0"></el-radio>
                            <el-radio label="女频" value="1"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="作品标签">
                        <el-select v-model="form.type" placeholder="请选择作品标签">
                            <el-option v-for="option in options" :key="option.id" :label="option.type"
                                       :value="option.id">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作品简介">
                        <el-input type="textarea" v-model="form.brief"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/book.js"></script>
<script src="../../api/type.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css">

<script>
    new Vue({
        el: '#createBook',
        data() {
            return {
                form: {
                    name: '',
                    type: '',
                    sex: '',
                    brief: '',
                    image: '',
                    author: '',
                    authorId: ''
                },
                options: [],
                id: '',
                userInfo: {}
            }
        },
        computed: {},
        created() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.init()
        },
        mounted() {
        },
        methods: {
            async init() {
                //获取标签信息
                queryTypeAll().then(res => {
                    if (String(res.code) === '200') {
                        this.options = res.data
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            //获取图片
            getImage(image) {

                return `/common/download?name=${image}`
            },
            //上传成功后
            handleAvatarSuccess(response) {
                this.form.image = response.data;
                this.getImage(this.form.image)
            },
            //上传成功前
            beforeAvatarUpload(file) {
                const suffix = file.name.split('.')[1];
                const size = file.size / 1024 / 1024 < 2;
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！');
                    return false;
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!');
                    return false;
                }
                return true;
            },
            //这个真正添加方法
            onSubmit() {
                this.form.author = this.userInfo.author;
                this.form.authorId = this.userInfo.id;
                const params = {
                    ...this.form,
                }
                //发送请求
                addBook(params).then(res => {
                    if (res.code === 200) {
                        this.$message.success('作品添加成功！')
                        this.form = {
                            name: '',
                            type: '',
                            sex: '',
                            brief: '',
                            image: '',
                            authorId: ''
                        }
                        window.location.href = '/author/page/book/list.html'
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            goBack() {
                window.parent.menuHandle({
                    id: '2',
                    url: '/author/page/book/list.html',
                    name: '员工管理'
                }, false)
            }
        }
    })
</script>
</body>
</html>